<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/layui-v2.6.4/css/layui.css" rel="stylesheet">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery.min.js"></script>
    <script src="/layui/axios.min.js"></script>
    <script src="/layui/vue.min.js"></script>
</head>
<body>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<div style="padding-right: 20px;padding-left: 20px">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>案件类型信息管理</legend>
    </fieldset>
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">类型名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="typeName" lay-verify="required" autocomplete="off" placeholder="请输入类型名称" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="search">查找</button>
            </div>
        </form>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-panel">
                <div style="padding: 50px 30px;">
                    <table class="layui-hide" id="type" lay-filter="type"></table>
                </div>
            </div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>案件类型添加</legend>
    </fieldset>
    <div class="layui-row">
        <div class="layui-col-md6">
            <div class="layui-panel">
                <div style="padding: 50px 30px;">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">类型名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="typeName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div style="text-align: center">
                            <button class="layui-btn layui-btn-normal" type="button" lay-submit lay-filter="add">添加类型</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['table','form','layedit','layer','upload'],function () {
        var table = layui.table,
            form = layui.form,
            layedit = layui.layedit,
            layer = layui.layer,
            upload = layui.upload

        var index = layedit.build('demo')


        form.on('submit(add)',function (data) {
            axios.post('/end/type/add',data.field).then(res => {
                layer.msg(res.data.msg);
            })
            return false
        })

        form.on('submit(search)',function (data) {
            table.render({
                elem: '#type'
                , url: '/end/type/search/' + data.field.typeName
                , limit: 3
                , cols: [[
                    {type:'numbers', fixed: 'left',title:'序号'}
                    , {field: 'typeName', title: '类型名称',edit: 'text'}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 180}
                ]]
                , page: true
            });
            return false;
        })

        table.render({
            elem: '#type'
            , url: '/end/type/get'
            , cols: [[
                {type:'numbers', fixed: 'left',title:'序号'}
                , {field: 'typeName', title: '类型名称',edit: 'text'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 180}
            ]]
            , page: true
        });

        table.on('tool(type)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    axios.post("/end/type/delete/"+data.id).then(res => {
                        layer.msg(res.data.msg);
                    })
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                axios.post("/end/type/update",data).then(res => {
                    layer.msg(res.data.msg);
                })
            }
        });


        form.verify({
            title: function(value){
                if(value.length < 1){
                    return '输入项至少得1个字符啊';
                }
            }
            ,image: function (value) {
                if(value.length < 1){
                    return '图片不可以无哇';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

    })
</script>
</html>
